<template>
    <div id="performanceStatistics" style="width: 96%; height: 100%; position: relative; z-index: 9;"></div>
</template>
<script>
import * as echarts from "echarts";
let timer = null;
export default {
    name: 'PerformanceStatistics',
    data() {
        return {
            xAxisData: ['金融', '企业', '工业', '通讯', '美业', '企业'],
            yAxisData: [150, 230, 224, 218, 135, 147],
            flag: true,
        }
    },
    mounted() {
        this.initChart();
        timer = setInterval(() => {
            if (this.flag) {
                this.yAxisData = [150, 230, 224, 218, 135, 147];
                this.flag = false;
            } else {
                this.yAxisData = [147, 150, 230, 224, 218, 135];
                this.flag = true;
            }
            this.initChart();
        }, 3500);
    },
    beforeDestroy() {
        clearInterval(timer);
    },
    methods: {
        initChart() {
            let dom = document.getElementById('performanceStatistics');
            let chart = echarts.init(dom, 'chalk')
            let option = {
                title: {
                    text: '业务量(条)',
                    left: 'right',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top: '15%',
                    left: '5%',
                    right: '0',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxisData,
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series: [
                    {
                        data: this.yAxisData,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = [
                                        '#FA897B',
                                        '#FFDD94',
                                        '#D0E6A5',
                                        '#FFDD94',
                                        '#4675C0',
                                        '#B8BFD6',
                                        '#FFA876'
                                    ];
                                    let colorItem = colorList[params.dataIndex];
                                    return colorItem;
                                }
                            }
                        },
                        label: {
                            show: true,
                            position: 'top', // 顶部显示
                            formatter: '{c}', // 显示数据值
                            textStyle: {
                                color: '#fff'
                            }
                        },
                    }
                ]
            };
            chart.setOption(option)
            // 监听屏幕变化自动缩放图表
            let observer = new ResizeObserver(function () {
                chart.resize();
            });
            observer.observe(dom)
        }
    }
}
</script>